“Ophion” Documentation by “IG_design” v1.0

“Ophion”

Created: 13/09/2014
By: Ivan Grozdic aka IG_design
Email: ivang.design@yahoo.com

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

CSS Files
Image Files
JavaScript
Sources and Credits

B) CSS Files and Structure - top

This theme uses css files contained in the css folder

Css files:

base
layout
font-awesome
skeleton

Css file layout:

Menu:


 

div.cs-select {
	margin-top:10px;
	position: relative;
	text-align: left;
	margin-right:15px;
	float:right;
	z-index: 1000;
	width: 100%;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

div.cs-select:focus {
	outline: none; /* For better accessibility add a style for this in your skin */
}

.cs-select select {
	display: none;
}

.cs-select span {
	display: block;
	position: relative;
	cursor: pointer;
	padding: 1em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Placeholder and selected option */
.cs-select > span {
	padding-right: 3em;
}

.cs-select > span::after,
.cs-select .cs-selected span::after {
	speak: none;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.cs-select > span::after {
	content: '\25BE';
	right: 1em;
}

.cs-select .cs-selected span::after {
	content: '\2713';
	margin-left: 1em;
}

.cs-select.cs-active > span::after {
	-webkit-transform: translateY(-50%) rotate(180deg);
	transform: translateY(-50%) rotate(180deg);
}

/* Options */
.cs-select .cs-options {
	position: absolute;
	overflow: hidden;
	width: 100%;
	visibility: hidden;
}

.cs-select.cs-active .cs-options {
	visibility: visible;
}

.cs-select ul {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

.cs-select ul span {
}

.cs-select ul li.cs-focus span {
}



.cs-select li.cs-optgroup > span {
	cursor: default;
}

@font-face {
	font-family: 'icomoon';
	src:url('font/icomoon/icomoon.eot?-rdnm34');
	src:url('font/icomoon/icomoon.eot?#iefix-rdnm34') format('embedded-opentype'),
		url('font/icomoon/icomoon.woff?-rdnm34') format('woff'),
		url('font/icomoon/icomoon.ttf?-rdnm34') format('truetype'),
		url('font/icomoon/icomoon.svg?-rdnm34#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

div.cs-skin-slide {
	color: #fff;
	font-size: 16px;
	font-family: 'Open Sans', sans-serif;
	width: 180px;
}

div.cs-skin-slide::before {
	content: '';
	background: rgba(40,43,48,.9);
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.cs-skin-slide.cs-active::before {
	top: 185%;
	-webkit-transform: scale3d(1,4.6,1);
	transform: scale3d(1,4.6,1);
}

.cs-skin-slide > span {
	height: 22px;
	line-height: 22px;
	-webkit-transition: text-indent 0.3s, opacity 0.3s;
	transition: text-indent 0.3s, opacity 0.3s;
}



.cs-skin-slide.cs-active > span {
	text-indent: -290px;
	opacity: 0;
}

.cs-skin-slide > span::after,
.cs-skin-slide.cs-active > span::after {
	font-family: 'icomoon';
	content: '\e00f';
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.cs-skin-slide.cs-active > span::after {
	-webkit-transform: translate3d(0,-50%,0);
	transform: translate3d(0,-50%,0);
}

.cs-skin-slide .cs-options {
	background: transparent;
	width: 70%;
	height: 400%;
	top: 230%;
	left: 50%;
	-webkit-transform: translate3d(-50%,-50%,0);
	transform: translate3d(-50%,-50%,0);
}

.cs-skin-slide .cs-options li {
	opacity: 0;
	-webkit-transform: translate3d(30%,0,0);
	transform: translate3d(30%,0,0);
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
}

.cs-skin-slide.cs-active .cs-options li {
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	-o-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	opacity: 1;
}


.cs-skin-slide.cs-active .cs-options li:first-child {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}

.cs-skin-slide.cs-active .cs-options li:nth-child(2) {
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
}

.cs-skin-slide.cs-active .cs-options li:nth-child(3) {
	-webkit-transition-delay: 0.25s;
	transition-delay: 0.25s;
}

.cs-skin-slide.cs-active .cs-options li:nth-child(4) {
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
}

.cs-skin-slide.cs-active .cs-options li:nth-child(5) {
	-webkit-transition-delay: 0.35s;
	transition-delay: 0.35s;
}
.cs-skin-slide.cs-active .cs-options li:nth-child(6) {
	-webkit-transition-delay: 0.4s;
	transition-delay: 0.4s;
}  /* more options need more delay declaration */

.cs-skin-slide .cs-options li span {
	text-transform: uppercase;
	font-family: 'Open Sans', sans-serif;
	letter-spacing: 2px;
	font-size: 12px;
	padding: 0.8em 1em 0.8em 2.5em;
}

.cs-skin-slide .cs-options li span:hover,
.cs-skin-slide .cs-options li.cs-focus span,
.cs-skin-slide .cs-options li.cs-selected span {
	background: transparent;
}

.cs-skin-slide .cs-selected span::after {
	content: '';
}

[class^="icon-"] span:before,
[class*=" icon-"] span:before {
	font-family: 'Pe-icon-7-stroke';
	position: absolute;
	left: 0;
	top: 50%;
	-webkit-transform: translate3d(0,-50%,0);
	transform: translate3d(0,-50%,0);
	font-size: 1.5em;
}

.icon-home-cod span::before {
	content: '\e648';
}

.icon-about-cod span::before {
	content: '\e693';
}

.icon-services-cod span::before {
	content: '\e65e';
}

.icon-work-cod span::before {
	content: '\e634';
}

.icon-blog-cod span::before {
	content: '\e628';
}

.icon-contact-cod span::before {
	content: '\e629';
}

About:


.head-content-wrap{ 
	position:relative;
	width:100%;
	margin:0 auto;
	overflow:hidden;
	z-index:2;
	padding-top:230px;
	margin-bottom:50px;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
} 
.head-content-wrap-image-about{ 
	background-image:url('../images/2.jpg');
}  
.head-content-wrap h5{ 
	color:#f4f4f4;
	font-weight: 700;
} 
.head-content-wrap h5 span{ 
	border:5px solid #f4f4f4;
	padding:20px;
}
.head-content-dark-wrap{ 
	position:relative;
	width:100%;
	margin:0 auto;
	overflow:hidden;
	z-index:2;
	margin-top:160px;
	padding-top:50px;
	padding-bottom:50px;
	background:rgba(40,43,48,.8);
} 
.head-content-dark-wrap p{ 
	color:#fff;
	font-family: 'Bilbo', cursive;
	text-align:center;
	letter-spacing:5px;
	font-size: 24px; 
	line-height:24px;
} 


.steps-carousel-wrap{ 
	position:relative;
	width:100%;
	margin:0 auto;
	overflow:hidden;
	z-index:2;
} 

#sync1 .item {
	position: relative; 
	margin: 0 auto;
    width:100%;
    display: block;
	margin-top:70px;
	padding:30px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	background:#fff;
	overflow:hidden;
}
#sync1 .item:after {
  content: '';
  display: block;
  clear: both;
}
#sync1 .item img{
    width:300px;
	height:auto;
	display:block;
	float:left;
}
#sync1 .item p{
    margin-left:330px;
	text-align:left;
}
#sync1 .item h6{
    margin-left:330px;
	text-align:left;
	padding-bottom:20px;
}
#sync1 .item .item-icon {
	font-family: 'Pe-icon-7-stroke';
	font-size: 44px;
	line-height: 44px;
	font-weight:400;
	padding-bottom:20px;
	text-align:left;
    margin-left:330px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
#sync2 {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	z-index:200;
}
#sync2 .item{
	width:100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	border-top:2px solid transparent;
	height:70px;
	z-index:200;
	overflow:hidden;
	cursor:pointer;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
#sync2 .item .item-text{
	color: #282b30;
	font-family: 'Montserrat', sans-serif;
	text-align:center;
	font-size: 16px;
	line-height: 70px;
	text-transform:uppercase;
	font-weight: 700;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
#sync2 .item .item-text:before {
	font-family: 'Pe-icon-7-stroke';
	font-size: 16px;
	line-height: 70px;
	font-weight:400;
	padding-right:15px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
#sync2 .item:hover {
	background:#fff;
}
#sync2 .synced .item {
	background:#fff;
}



.team-wrapper{ 
	position:relative;
	width:100%;
	margin:0 auto;
	overflow:hidden;
	z-index:2;
	background:#fff;
	padding-top:50px;
	padding-bottom:70px;
	margin-top:70px;
}

.member-wrap{ 
	position:relative;
	width:100%;
	overflow:hidden;
	background:#f1f1f1;
}
.member-wrap:after {
  content: '';
  display: block;
  clear: both;
}
.member-wrap img{ 
	width:260px;
	height:auto;
	display:block;
	float:left;
}
.member-wrap h6{ 
	padding-top:30px;
	padding-left:290px;
	padding-right:30px;
	text-align:left;
}
.member-wrap p{ 
	padding-top:20px;
	padding-left:290px;
	padding-right:30px;
	text-align:left;
}
.member-wrap .sub-name-mem{ 
	font-family: 'Open Sans', sans-serif;
	font-size: 10px;
	line-height:10px;
	text-transform:uppercase;
	letter-spacing:2px;
	font-weight:300;
	padding-top:5px;
	padding-left:290px;
	padding-right:30px;
	text-align:left;
}
.member-wrap .arrow-left{
	left:247px;
	width:0;
	height:0;
	z-index:333;
	position:absolute;
	top:30px;
	margin-top:-7px;
	border-top:15px solid transparent;
	border-bottom:15px solid transparent;
	border-right:15px solid #f1f1f1;
}


.social-team{ 
	position:relative;
	padding-top:20px;
	padding-bottom:20px;
	padding-left:285px;
	padding-right:30px;
	text-align:left;
	height:25px;
}
.list-social-team li {
    padding:0; 
    list-style: none;
	text-align:center; 
	width:22px;
    display: inline-block;
	cursor:pointer;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear; 
}
.list-social-team li.icon-soc-team a {
	font-family: 'FontAwesome';
	font-size: 15px;
	line-height: 25px;
	width:22px;
	opacity:1;
	margin:0;
	padding:0;
	color: #282b30;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear; 
}
.list-social-team li:hover{
}
.list-social-team li:hover.icon-soc-team a{
}


.office-place{ 
	position:relative;
	width:100%;
	margin:0 auto;
	z-index:2;
}
.office-place:after {
	content: '';
	display: block;
	clear: both;
}
.office-place .block-in{
	position: relative;
	width:50%;
	float:left;
}
.office-place h5{ 
	padding-top:70px;
	text-align:left;
	margin-left:70px;
	max-width:520px;
	width:calc(100% - 140px);
}
.office-place .line-text{ 
	margin-left:70px;
}
.office-place .subtext-content{ 
	text-align:left;
	margin-left:70px;
	max-width:520px;
	width:calc(100% - 140px);
}
.office-place p{ 
	text-align:left;
	margin-left:70px;
	padding-bottom:30px;
	max-width:520px;
	width:calc(100% - 140px);
}

.background-page {
	position: relative;
	height:400px;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:top center;
}
.background-page-1 {
	background-image:url('../images/of1.jpg');
}
.background-page-2 {
	background-image:url('../images/of2.jpg');
}
.background-page-3 {
	background-image:url('../images/of3.jpg');
}


.pageflip {
	position: relative;
	-webkit-perspective: 2000px;
        perspective: 2000px; 
	width:100%;
	margin:0 auto;
}
.pageflip .page {
    display: none;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 10;
}
.pageflip .page img{
    width: 100%;
    height:auto;
	display:block;
}
.pageflip .page.page-current {
    display: block; 
}
  .pageflip .half {
    position: absolute;
    width: 50%;
    height: 100%;
    overflow: hidden;
    top: 0;
    z-index: 15;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d; }
    .pageflip .half.half-left {
      left: 0; }
    .pageflip .half.half-right {
      left: 50%; }
      .pageflip .half.half-right .page {
        margin-left: -100%; }
  .pageflip .half .page, .pageflip .side .page {
    display: block !important;
    width: 200%; }
  .pageflip .flip-part {
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    left: 50%;
    z-index: 20;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 1.2s;
            transition: transform 1.2s;
    -webkit-transform-origin: center left;
        -ms-transform-origin: center left;
            transform-origin: center left; }
    .pageflip .flip-part .side {
      display: block;
      position: absolute;
      overflow: hidden;
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: hidden;
              backface-visibility: hidden;
      -webkit-transform-style: preserve-3d;
              transform-style: preserve-3d; }
      .pageflip .flip-part .side.side-front .page {
        margin-left: -100%; }
      .pageflip .flip-part .side.side-back {
        -webkit-transform: rotateY(-180deg);
                transform: rotateY(-180deg); }
    .pageflip .flip-part.flipped {
      -webkit-transform: rotateY(-180deg);
              transform: rotateY(-180deg); }
    .pageflip .flip-part.flip-reverse {
      left: 0;
      -webkit-transform: rotateY(180deg);
              transform: rotateY(180deg);
      -webkit-transform-origin: center right;
          -ms-transform-origin: center right;
              transform-origin: center right; }
      .pageflip .flip-part.flip-reverse.flipped {
        -webkit-transform: rotateY(0);
                transform: rotateY(0); }
      .pageflip .flip-part.flip-reverse .side.side-front .page {
        margin-left: 0%; }
      .pageflip .flip-part.flip-reverse .side.side-back {
        -webkit-transform: rotateY(180deg);
                transform: rotateY(180deg); }
        .pageflip .flip-part.flip-reverse .side.side-back .page {
          margin-left: -100%; }
  .pageflip .flip-navigation {
    position: absolute;
    width: 100%;
    bottom: 10px;
    text-align: center;
    line-height: 20px;
    z-index: 30; }
    .pageflip .flip-navigation a {
      display: inline-block;
      width: 12px;
      height: 12px;
      vertical-align: middle;
      text-align: center;
      color: #333;
	  margin-left:10px;
	  margin-right:10px;
      opacity: 0.7;
      -webkit-transition: all 0.25s;
              transition: all 0.25s;
      border-radius: 50%;
      text-decoration: none;
      margin: 0 2px; }
      .pageflip .flip-navigation a:hover {
        opacity: 0.9; }
      .pageflip .flip-navigation a.active {
        width: 16px;
        height: 16px; }



.logos-wrapper{ 
	position:relative;
	width:100%;
	margin:0 auto;
	background:#fff;
	padding-top:100px;
	padding-bottom:100px;
}
.logos-wrapper img{ 
	width:70px;
	height:auto;
	display:block;
	margin:0 auto;
}

C) Image Files - top

All the graphic elements for the entire theme are contained at the "images" folder.

D) JavaScript - top

All the pages link the neccessary js files inside the "head" tag of the document. If you need to modify the behavior from a certain jquery element open the "js" folder where you can alter the parameters of some of the js elements.

E) Sources and Credits - top

I've used the following images, icons or other files as listed.

JAVASCRIPT

FONTS

Lato

Once again, thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

IG_design

Go To Table of Contents